<template>
    <div v-if="orderDetail" class="order-detail">
        <!-- 商品 -->
        <block v-if="orderDetail.type === 'good'">
            <div class="order-status white-bg" v-if="orderStatusText && orderHint">
                <span class="icon color-red">&#xe647;</span>
                <div class="status-info">
                    <div class="color-red large-text">{{orderStatusText}}</div>
                    <div class="hint grey-color small-text">{{orderHint}}</div>
                </div>
            </div>

            <div class="separation"></div>
            <div class="area-info">
                <div class="icon">&#xe619;</div>
                <div class="info">
                    <div class="people normal-text">
                        <span class="name">{{orderDetail.name}}</span>
                        <span class="mobile">&emsp;{{orderDetail.mobile}}</span>
                    </div>
                    <div class="area small-text grey-color" v-if="orderDetail.address">
                        {{orderDetail.address}}
                    </div>
                </div>
            </div>
            <div class="separation"></div>
        </block>
        <!-- 商品 -->
        <block v-if="goodsIsArr">
            <block v-for="(item, index) in goodDetail" :key="index">
                <div class="good-info clearfix white-bg" @click="toDetail(item)">
                    <span class="single-line-left">
                        <div class="cover" :style="{'background-image': 'url(' + item.order_cover + ')'}"></div>
                    </span>
                    <div class="single-line-center-wrapper overflow good-content">
                        <div class="name large-text">{{item.good_name}}</div>
                        <div class="normal-text price-wrap clearfix">
                            <span class="fl price color-red">￥{{item.price_text}}</span>
                            <span class="fr grey-color">{{'&times;' + item.number}}</span>
                        </div>
                    </div>
                </div>
            </block>
            <div class="order-info large-text white-bg">
                <div class="info-item">
                    <span class="grey-color">订单类型:</span>
                    {{orderDetail && orderDetail.is_prepay == 1 ? '预付金额' : '全款支付'}}
                </div>
            </div>
        </block>
        <!-- 套餐 -->
        <block v-else>
            <div class="area-info">
                <div class="icon">&#xe619;</div>
                <div class="info">
                    <div class="people normal-text">
                        <span class="name">{{orderDetail.name}}</span>
                        <span class="mobile">&emsp;{{orderDetail.mobile}}</span>
                    </div>
                    <div class="area small-text grey-color" v-if="orderDetail.address">
                        {{orderDetail.address}}
                    </div>
                </div>
            </div>
            <div class="separation"></div>
            <div class="good-info clearfix white-bg" @click="toDetail">
                <span class="single-line-left">
                    <div class="cover" :style="{'background-image': 'url(' + orderDetail.cover + ')'}"></div>
                </span>
                <div class="single-line-center-wrapper overflow good-content">
                    <div class="name large-text">{{orderDetail.title}}</div>
                    <div class="normal-text price-wrap clearfix">
                        <span class="fl price color-red">￥{{orderDetail.original_price - orderDetail.discount_amount | currency}}</span>
                        <span class="fr grey-color">{{'&times;' + 1}}</span>
                    </div>
                </div>
            </div>
            <div class="order-info large-text white-bg">
                <div class="info-item" v-if="orderDetail.deliver_date">
                    <span class="grey-color">拍摄日期:</span>
                    {{orderDetail.deliver_date}}
                </div>
                <div class="info-item">
                    <span class="grey-color">订单类型:</span>
                    {{orderDetail.is_prepay == 1 ? '预付金额' : '全款支付'}}
                </div>
            </div>
        </block>

        <div class="section-gap"></div>
        <div class="order-info large-text white-bg">
            <div class="info-item">
                <span class="grey-color">订单编号:</span>
                {{orderDetail ? orderDetail.id : ''}}
            </div>
            <div class="info-item">
                <span class="grey-color">下单时间:</span>
                {{orderDetail ? orderDetail.created_at : ''}}
            </div>
            <block v-if="orderDetail && orderDetail.type === 'good'">
                <div class="info-item">
                    <span class="grey-color">订单价格:</span>
                    ￥{{(orderDetail.original_price - orderDetail.discount_amount) | currency}}
                </div>
                <div class="info-item" v-if="orderDetail.is_prepay">
                    <span class="grey-color">商品原价:</span>
                    {{oldCurrencyPriceOfProductPrepay}}
                </div>
                <div class="info-item" v-if="orderDetail.is_prepay">
                    <span class="grey-color">剩余尾款:</span>
                    {{lastPriceOfProductPrepayText}}
                    <span class="color-red">({{orderDetail.final_payment ? '已付' : '未付'}})</span>
                </div>
                <div class="info-item clearfix" v-if="couponPay">
                    <div class="fl grey-color">代金券抵扣</div>
                    <div class="fr color-red">{{couponPay ? '-' + couponPay : 0}}</div>
                </div>
                <div style="padding:22rpx 0rpx" class="clearfix">
                    <!-- 微信支付 -->
                    <div class="title before-line clearfix fr" style="padding:4rpx 0rpx;width:100%;font-size:28rpx;display: flex;justify-content: flex-end;" v-if="orderDetail.we_chat_pay > 0">
                        <div class="">微信支付:</div>
                        <div class="" style="width:145rpx;">
                            <span>{{weChartPrice}}</span>
                        </div>
                    </div>
                    <!-- 余额支付 -->
                    <div class="title before-line clearfix fr" style="padding:4rpx 0rpx;width:100%;font-size:28rpx;display: flex;justify-content: flex-end;" v-if="orderDetail.balance_pay > 0">
                        <div class="">充值支付:</div>
                        <div class="" style="width:145rpx;">
                            <span>{{balancePay}}</span>
                        </div>
                    </div>
                    <div class="title before-line clearfix fr" style="padding:4rpx 0rpx;width:100%;font-size:28rpx;display: flex;justify-content: flex-end;">
                        <!-- <div class="">{{orderDetail && orderDetail.is_prepay == 1 ? '预付金额:' : '支付总计:'}}</div> -->
                        <div class="">{{orderDetail && orderDetail.is_prepay == 1 ? '支付总计:' : '支付总计:'}}</div>
                        <div class="fr" style="width:145rpx;"> <!-- color-red -->
                            <span>{{totalPriceCurrency}}</span>
                        </div>
                    </div>
                </div>
                <!-- <div class="pay-price">
                    <div class="textflexend" style="padding-top:5rpx;" v-if="orderDetail.balance_pay">
                        <span style="width:205rpx;">余额支付金额:</span>
                        <span class="color-red">{{balancePay}}</span>
                    </div>
                    <div class="textflexend" style="padding-top:5rpx;" v-if="orderDetail.we_chat_pay == 1">
                        <span style="width:205rpx;">微信支付金额:</span>
                        <span class="color-red">{{weChartPrice}}</span>
                    </div>
                    <div class="textflexend" style="padding-top:5rpx;">
                        <span style="width:205rpx;">支付总金额:</span>
                        <span class="color-red">{{totalPriceCurrency}}</span>
                    </div>
                </div> -->
                
            </block>
            <block v-else>
                <div class="section-gap"></div>
                <div class="price-detail">
                    <!-- <div class="title after-line text-normal font-bold">价格明细</div> -->
                    <div class="title text-small clearfix">
                        <div class="fl">原套餐价格</div>
                        <div class="fr">¥{{oldPkgPrice}}</div>
                    </div>
                    <div class="title text-small" v-if="orderDetail && orderDetail.detail.spec.length">
                        定制产品
                    </div>
                    <div class="inner text-small">
                        <div class="item clearfix" v-for="(val, valIndex) in specCurrency" :key="valIndex">
                            <div class="label fl grey-text-color">{{val.attr_value}}</div>
                            <div class="val fr">¥{{val.price}} * {{val.number}}</div>
                        </div>
                    </div>
                    <block v-if="giftArr.length">
                        <div class="title text-small">
                            赠送产品
                        </div>
                        <div class="inner text-small">
                            <div class="item clearfix" v-for="(val, valIndex) in giftArr" :key="valIndex">
                                <div class="label fl grey-text-color">{{val.attr_value}}</div>
                                <div class="val fr">¥{{val.price}} * {{val.number}}</div>
                            </div>
                        </div>
                    </block>
                    
                    <div class="title text-small clearfix" v-if="couponPay">
                        <div class="fl">代金券抵扣</div>
                        <div class="fr color-red">{{couponPay ? '-' + couponPay : 0}}</div>
                    </div>
                    <div style="padding:22rpx 0rpx;">
                        <!-- 微信支付 -->
                        <div class="title before-line clearfix text-small" style="padding:6rpx 0rpx" v-if="orderDetail.we_chat_pay >0">
                            <div class="fl">微信支付</div>
                            <div class="fr color-red">
                                <!-- <span class="text-small">小计&emsp;</span> -->
                                <span>{{weChartPrice}}</span>
                            </div>
                        </div>
                        <!-- 余额支付 -->
                        <div class="title before-line clearfix text-small" style="padding:6rpx 0rpx" v-if="orderDetail.balance_pay > 0">
                            <div class="fl">充值支付</div>
                            <div class="fr color-red">
                                <!-- <span class="text-small">小计&emsp;</span> -->
                                <span>{{balancePay}}</span>
                            </div>
                        </div>
                        <div class="title before-line clearfix text-small" style="padding:6rpx 0rpx">
                            <!-- <div class="fl">{{orderDetail && orderDetail.is_prepay == 1 ? '预付金额' : '支付总计'}}</div> -->
                            <div class="fl">{{orderDetail && orderDetail.is_prepay == 1 ? '支付总计' : '支付总计'}}</div>
                            <div class="fr color-red">
                                <!-- <span class="text-small">小计&emsp;</span> -->
                                <span>{{totalPriceCurrency}}</span>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </block>
        </div>

    </div>
</template>

<script lang="ts">
import store from '@/store/index';
import { currency, getOrderStatus } from '@/lib/utils';
import { api } from '@/lib/api';
import { ROUTE_NAME, TYPE_SET_ORDER_ADDRESS } from '@/lib/constant';
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import InfoItem from '@/module/order/components/infoItem.vue';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'manageOrderDetail',
    components: {
        InfoItem,
    },
    methods: {
        currency,
    },
})
export default class manageOrderDetail extends Vue {
    /** 订单id */
    public get orderId() {
        return this.$route.params.orderId;
    }
    /** 客服信息 */
    public get service() {
        return store.state.utils.service;
    }
    public get detail() {
        return store.state.order.manageorderoetail;
    }
    /** 订单详情 */
    public get orderDetail() {
        return this.detail[Number(this.orderId)];
    }
    public get specCurrency() {
        return this.orderDetail && this.orderDetail.detail.spec ? this.orderDetail.detail.spec.map((item: any) => {
            return Object.assign(item, {
                price: currency(item.price),
            });
        }) : [];
    }
    /** 商品详情 */
    public get goodDetail() {
        return this.orderDetail ? this.orderDetail.detail : [];
    }
    /** 商品是否是数组 */
    public get goodsIsArr() {
        return this.goodDetail ? Array.isArray(this.goodDetail) : false;
    }
    /** 商品id */
    public get goodId() {
        return this.orderDetail ? this.orderDetail.goods_id : null;
    }
    public get couponPay() {
        return this.orderDetail && this.orderDetail.coupon_pay ? currency(this.orderDetail.coupon_pay) : 0;
    }
    public get oldPkgPrice() {
        return this.orderDetail && this.orderDetail.type !== 'good' && this.orderDetail.detail ? currency(this.orderDetail.detail.default_price) : 0;
    }
    public get oldPriceOfProductPrepay() {
        return this.orderDetail ? this.orderDetail.original_price : 0;
    }
    // 预付商品原价
    public get oldCurrencyPriceOfProductPrepay() {
        return this.goodsIsArr && this.goodDetail ? '¥' + currency(this.goodDetail.reduce((prev, next) => {
            return {
                price: prev.price + next.price,
            };
        }, {
            price: 0,
        }).price) : '¥' + currency(this.oldPriceOfProductPrepay);
    }
    public get orderPriceOfProduct() {
        return this.orderDetail ? Number(this.oldPriceOfProductPrepay) - Number(this.orderDetail.coupon_pay) - this.orderDetail.discount_amount : 0;
    }
    public get lastPriceOfProductPrepayText() {
        return '￥' + (this.orderDetail ? currency(Number(this.orderPriceOfProduct) - Number(this.orderDetail.price)) : 0);
    }
    /** 单价金额 */
    public get priceCurrency() {
        const orderDetail = this.orderDetail;
        return orderDetail ? '￥' + currency(orderDetail.price) : '';
    }
    /** 总价格 */
    public get totalPriceCurrency() {
        if (!this.orderDetail) {
            return ''
        }

        return this.orderDetail.is_prepay
            ? '￥' + currency(this.orderDetail.price)
            : '￥' + currency(Number(this.orderDetail.price) - Number(this.orderDetail.coupon_pay) - Number(this.orderDetail.discount_amount))
    }
    // 微信支付的金额
    public get weChartPrice(){
        if (!this.orderDetail) {
            return ''
        }
        return this.orderDetail.we_chat_pay ? '￥' + this.orderDetail.we_chat_pay/100 : 0
    }
    // 余额支付的金额
    public get balancePay(){
        if (!this.orderDetail) {
            return ''
        }
        return this.orderDetail.balance_pay ? '￥' + this.orderDetail.balance_pay/100 : 0
    }


    /** 订单状态 */
    public get orderStatus() {
        return this.orderDetail?.status;
    }
    /** 订单状态 */
    public get orderStatusText() {
        if (!this.orderDetail) {
            return '';
        }
        return getOrderStatus(this.orderStatus, this.orderDetail.delivery, this.orderDetail.is_finish);
    }
    /**
     * 流程提示
     */
    public get orderHint() {
        if (!this.orderDetail) {
            return '';
        }
        const status = this.orderDetail.status;
        switch (status) {
        case 'init':
        case 'pay_pending':
            return '您的订单等待支付';
        case 'paid':
            if (this.orderDetail.is_finish) {
                return '您的订单已到货';
            }
            if (this.orderDetail.delivery === 2) {
                return '您的订单已发货，请耐心等待';
            } else if (this.orderDetail.delivery === 1) {
                return '您的订单正在备货，请耐心等待';
            }
            return;
        case 'close':
            return '您的订单已关闭';
        case 'refund':
        case 'refund_pending':
            return '您的订单已退款';
        }
    }
    public get giftArr() {
        return this.orderDetail && this.orderDetail.gift ? this.orderDetail.gift.map((item) => {
            return Object.assign(item, {
                price: 0,
            });
        }) : [];
    }

    public async toDetail(detail: any) {
        if (this.orderDetail.type === 'good') {
            if (detail && detail.good_id) {
                api.push({
                    // url: '/pages/product_detail/main',
                    name: ROUTE_NAME.PRODUCT_DETAIL,
                    params: {
                        productId: detail.good_id,
                    },
                });
            } else {
                api.push({
                    // url: '/pages/product_detail/main',
                    name: ROUTE_NAME.PRODUCT_DETAIL,
                    params: {
                        productId: this.goodDetail[0].good_id,
                    },
                });
            }
        } else {
            api.push({
                // url: '/pages/pkg_detail/main',
                name: ROUTE_NAME.PKG_DETAIL,
                params: {
                    pkgId: this.orderDetail.link_id + '',
                },
            });
        }
    }
    
    
    public async onPullDownRefresh() {
        store.commit('utils/startRequest');
        await store.dispatch('order/getManageOrderDetail', {
            orderId: this.orderId,
        });
        store.commit('utils/endRequest');
        wx.stopPullDownRefresh();
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('order/getManageOrderDetail', {
                orderId: to.params.orderId,
            }),
            store.dispatch('utils/getPageConfig'),
        ]);
        store.commit('utils/endRequest');
        next();
    }
    public async created() {
        window.addEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
    public beforeDestroy() {
        window.removeEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.order-detail {
    min-height: 100%;
    background-color: @default-bg-color;
    padding-bottom: 100rpx;
    box-sizing: border-box;

    .textflexend{
        display: flex;
        justify-content: space-between;
    }
    .order-status {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16rpx 30rpx;
        .icon {
            display: inline-block;
            font-size: 48rpx;
            padding-left: 30rpx;
        }
        .status-info {
            display: flex;
            flex-direction: column;
            align-items: left;
            padding: 0 30rpx;
        }
    }
    .good-info {
        padding: 16rpx 30rpx;
        .cover {
            width: 144rpx;
            height: 144rpx;
            background: center no-repeat;
            background-size: cover;
            border-radius: 7px;
        }
        .price-wrap {
            padding-top: 16rpx;
        }
        .good-content {
            padding-left: 16rpx;
        }
    }
    .remark-wrap {
        position: relative;
        padding: 16rpx 30rpx;
        color: #999;
    }
    .order-info {
        padding: 16rpx 30rpx;
        .info-item {
            padding-top: 10rpx;
        }
    }
    .pay-price {
        padding-top: 40rpx;
    }
    .fixed-btn-wrap {
        padding: 16rpx 30rpx;
        .btn.btn-mobile {
            min-width: 160rpx;
            padding: @button-normal-padding-v 0;
            margin-left: 16rpx;
            text-align: center;
        }
    }
    .area-info {
        display: flex;
        align-items: center;
        padding: 16rpx 30rpx;
        background: @white-color;
        .icon {
            // margin-right: 10px;
            font-size: 48rpx;
            padding-left: 30rpx;
            color: @grey-color;
        }
        .info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0 30rpx;
        }
    }
     .price-detail {
        // padding: 0 17px;
        .title {
            position: relative;
            padding: 22rpx 0;
        }
        .inner {
            padding-left: 40rpx;
            .item {
                margin: 10rpx 0;
            }
        }
    }
}

</style>
